import React from 'react';
import ReactDOM from 'react-dom';
import {
  $tokenName,
  $getToken,
  $setToken,
  $formatSearchParam,
  $version
} from '@/plugins/baseInfo'
import {
  nanoid
} from 'nanoid'
import { createCommonSingleton} from '@/plugins/utils/index'

import ReactInstanceWrap from './ReactInstanceWrap'

const createPreviewFileDiv = createCommonSingleton(function () {
  const id = `p-f-${nanoid()}`
  const div = document.createElement('div')
  div.style.width = 0
  div.style.height = 0
  div.id = id
  document.body.appendChild(div)
  return div
})


//  reactInstance -- 需要渲染的组件，必传， 后续的 rest 会全部传入 reactInstance 中
const createReactInstanceApi = ({reactInstance, ...rest}) => {

  // if (!reactInstance) {
  //   console.error('请传入必须要渲染的组件')
  //   return
  // }

  let div = createPreviewFileDiv() // 获取 需要用来 预览 文件的  容器 dom

  ReactDOM.render(
    <ReactInstanceWrap key = {nanoid()} {...{reactInstance,...rest}}/>,
    div
  )
}

export default createReactInstanceApi